<template>
    <a-modal :width="500" :title="title" v-model="visible" @cancel="handleCancel">
        <template slot="footer">
            <div class="drawer-bootom-button">
                <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
                    <a-button key="back">关闭</a-button>
                </a-popconfirm>
                <a-button key="submit" type="primary" :loading="loading" @click="handleOk">保存</a-button>
            </div>
        </template>
        <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item label="分类名称">
                <a-input placeholder="请输入分类名称" v-decorator="[ 'name', validatorRules.name]" />
            </a-form-item>
            <a-form-item label="拼音">
                <a-input placeholder="请输入拼音" v-decorator="[ 'pinyin', validatorRules.pinyin]" />
            </a-form-item>
            <a-form-item label="排序">
                <a-input-number id="inputNumber" v-decorator="[ 'order', validatorRules.order]" :min="1" :max="100" style="width:100%" />
            </a-form-item>
            <a-form-item label="状态">
                <a-select v-decorator="[ 'state', validatorRules.state]" placeholder="请选择状态!">
                    <a-select-option value="0">
                        已删除
                    </a-select-option>
                    <a-select-option value="1">
                        正常
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="描述">
                <a-textarea placeholder="请输入描述" :auto-size="{ minRows: 2, maxRows: 4 }" v-decorator="[ 'description', validatorRules.description]" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
import pick from "lodash/pick";
import { postCategory, updateCategory } from '@/api/api'
export default {
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
            visible: false,
            loading: false,
            title: '',
            form: this.$form.createForm(this),
            id: '',
            validatorRules: {
                name: {
                    rules: [{
                        required: true,
                        message: '请输入分类名称!',
                    }]
                },
                pinyin: {
                    rules: [{
                        required: true,
                        message: '请输入拼音!',
                    }]
                },
                order: {
                    rules: [{
                        required: true,
                        message: '请输入排序!',
                    }]
                },
                state: {
                    rules: [{
                        required: true,
                        message: '请选择状态!',
                        whitespace: true
                    }]
                },
                description: {
                    rules: [{
                        required: true,
                        message: '请您输入描述信息!',
                        whitespace: true
                    }]
                }
            },
        }
    },
    methods: {
        add() {
            this.edit({});
        },
        edit(record) {
            this.form.resetFields();
            this.visible = true;
            this.model = Object.assign({}, record);
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(record, 'name', 'pinyin', 'order', 'state', 'description'))
            });
            this.id = record.id;
        },
        handleCancel() {
            this.form.resetFields();
            this.visible = false
        },
        handleOk() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.loadingOk = true;
                    let formData = Object.assign(this.model, values);
                    let requestFn;
                    console.log("分类表单信息:  ", formData);

                    if (!this.model.id) {//新增
                        this.loading = true;
                        requestFn = postCategory(formData).then(res => {
                            console.log("res", res);
                            if (res.code === 200) {
                                this.loading = false;
                                this.$message.success("添加成功!");
                                this.$emit('ok');
                                this.visible = false;
                            }else{
                                this.$message.error(res.message);
                            }
                        })
                    } else {//编辑
                        requestFn = updateCategory(this.id, formData).then(res => {
                            if (res.code === 200) {
                                this.loading = false;
                                this.$message.success("操作成功!");
                                this.$emit('ok');
                                this.visible = false;
                            }else{
                                this.$messaga.error("操作失败!");
                            }
                        })
                    }
                } else {
                }
            })
        },
    }
}
</script>